/* stylelint-disable comment-word-blacklist */
/* stylelint-disable declaration-no-important */
.container {
  position: absolute;
  z-index: 2;
  padding: 10px 8px;
  width: 304px;
  background-color: var(--pneumatic-color-black100);
  border-radius: 8px;

  &::after {
    position: absolute;
    right: 50%;
    bottom: -8px;
    margin-right: -12px;
    width: 24px;
    height: 8px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='8' viewBox='0 0 24 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1.90797e-07L12 9.53987e-08V8C12 3.58172 17.3726 1.90797e-07 24 1.90797e-07Z' fill='%23262522'/%3E%3Cpath d='M0 0L12 9.53987e-08V8C12 3.58172 6.62742 0 0 0Z' fill='%23262522'/%3E%3C/svg%3E");
  }
}

/* using !important property to fix layout in kick-off form fileds
  TODO: remove !important after kick-off form fileds will be refactored
*/
body .container .input-field {
  all: unset !important;
  padding: 0 !important;
  width: 100% !important;
  height: 20px !important;
  color: white !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;

  &::placeholder {
    color: var(--pneumatic-color-black72) !important;
  }
}

.url-field-wrapper {
  position: relative;
}

body .container .url-field {
  width: calc(100% - 58px) !important;
}

.controls {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0 -4px;
  display: flex;
}

.controls_button {
  all: unset;
  margin: 0 4px;
  display: flex;
  color: var(--pneumatic-color-link);
  transition: color 0.1s ease-in-out;

  &:hover {
    color: var(--pneumatic-color-link-hover);
  }
}

.separator {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background-color: var(--pneumatic-color-black72);
}
